<template>
  <el-card>
    <el-input v-model="name" inline style="width:200px" />
    <el-button
      type="primary"
      icon="el-icon-search"
      style="margin-left:10px"
      @click="getUserAclList"
    >
      查询
    </el-button>
    <el-button style="margin-left:10px" @click="name = ''">
      清空
    </el-button>
    <el-row>
      <!-- 添加删除 -->
      <el-button style="margin:20px 10px" type="primary" @click="addUserOne">
        添加
      </el-button>
      <el-button
        style="margin:20px 10px"
        type="danger"
        :disabled="!selectList.length"
        @click="delUserSelectList"
      >
        批量删除
      </el-button>
    </el-row>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="userAclList"
      tooltip-effect="dark"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      >
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" prop="index" width="55" type="index" />
      <el-table-column label="用户名" prop="username" width="90" />
      <el-table-column label="用户昵称" prop="nickName" width="90" />
      <el-table-column label="权限列表" prop="roleName" />
      <el-table-column label="创建时间" prop="gmtCreate" />
      <el-table-column label="更新时间" prop="gmtModified" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <!-- 分配权限 -->
          <el-button
            type="info"
            icon="el-icon-user-solid"
            size="mini"
            @click="assignPurview(row)"
          />
          <!-- 修改 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="modifyUser(row)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteUser(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="limit"
      layout=" prev, pager, next, jumper,total, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 弹窗 -->
    <el-dialog
      :title="isCard ? '添加用户' : '修改用户'"
      :visible.sync="dialogFormVisible"
    >
      <el-form ref="from" :model="form" :rules="rules">
        <el-form-item label="用户名" label-width="100px" prop="username">
          <el-input
            v-model="form.username"
            autocomplete="off"
            style="width:90%"
          />
        </el-form-item>
        <el-form-item label="用户昵称" label-width="100px" prop="nickName">
          <el-input
            v-model="form.nickName"
            autocomplete="off"
            style="width:90%"
          />
        </el-form-item>
        <el-form-item
          v-if="isCard"
          label="用户密码"
          label-width="100px"
          prop="password"
        >
          <el-input
            v-model="form.password"
            autocomplete="off"
            style="width:90%"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cool()">取 消</el-button>
        <el-button type="primary" @click="submitForm('from')">
          确 定
        </el-button>
      </div>
    </el-dialog>
    <!-- 分配权限弹窗 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisibleTwo">
      <el-form>
        <el-form-item label="用户名" label-width="80px">
          <el-input v-model="form.username" autocomplete="off" disabled />
        </el-form-item>
        <!-- 多选框 -->
        <el-form-item label="角色列表" label-width="80px">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll">
            全选
          </el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group
            v-model="checkedIdList"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="list in userAssignAllList"
              :key="list.roleName"
              :label="list.id"
            >
              {{ list.roleName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <!-- 最下面按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleTwo = false">取 消</el-button>
        <el-button type="primary" @click="alterJurisdiction">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getUserList,
  delUserOne,
  delUserAll,
  addUser,
  userUpdate,
  userAssign,
  userDoAssign
} from '@/api/acl/user'

export default {
  name: 'User',
  data() {
    return {
      checkedIdList: [],
      checkAll: false,
      isIndeterminate: true,
      isCard: true,
      name: '',
      page: 1,
      limit: 5,
      total: 0,
      userAclList: [],
      selectList: [],
      dialogFormVisible: false,
      dialogFormVisibleTwo: false,
      form: {
        username: '',
        nickName: '',
        password: '',
        roleName: '',
        id: ''
      },
      userAssignAllList: [],
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getUserAclList()
  },
  methods: {
    // 获取数据
    async getUserAclList() {
      const { page, limit, name } = this
      const res = await getUserList({ page, limit, username: name })
      this.total = res.total
      this.userAclList = res.items
    },
    // 点击添加
    addUserOne() {
      this.cool()
      this.isCard = true
      this.dialogFormVisible = true
    },
    handleSizeChange(val) {
      this.limit = val
      this.getUserAclList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getUserAclList()
    },
    // 删除单项
    async deleteUser(row) {
      await delUserOne(row.id)
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      this.getUserAclList()
    },
    // 选择多选框触发
    handleSelectionChange(val) {
      this.selectList = val.map(item => {
        return item.id
      })
    },
    // 删除所有选中
    async delUserSelectList() {
      if (this.selectList.length === 0) {
        return
      }
      await delUserAll(this.selectList)
      this.getUserAclList()
      this.$message({
        message: '删除成功呢',
        type: 'success'
      })
    },
    // 添加用户/修改
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        const { nickName, username, password, roleName, id } = this.form
        if (valid) {
          if (this.isCard) {
            const data = {
              deleted: false,
              nickName,
              password,
              username
            }
            await addUser(data)
            this.getUserAclList()
            this.$message({
              message: '添加成功呢',
              type: 'success'
            })
          } else {
            const data = {
              deleted: false,
              nickName,
              username,
              roleName,
              id
            }
            await userUpdate(data)
            this.getUserAclList()
            this.$message({
              message: '修改成功呢',
              type: 'success'
            })
          }
        } else {
          return false
        }
      })
    },
    // 清空内容
    cool() {
      this.dialogFormVisible = false
      this.form.nickName = ''
      this.form.username = ''
      this.form.password = ''
      this.form.id = ''
      this.form.roleName = ''
    },
    // 修改用户
    modifyUser(row) {
      this.isCard = false
      this.form.username = row.username
      this.form.nickName = row.nickName
      this.form.roleName = row.roleName
      this.form.id = row.id
      this.dialogFormVisible = true
    },
    // 分配权限
    async assignPurview(row) {
      let res = await userAssign(row.id)
      this.form.username = row.username
      this.form.id = row.id
      this.userAssignAllList = res.allRolesList
      this.checkedIdList = res.assignRoles.map(item => {
        return item.id
      })
      this.dialogFormVisibleTwo = true
    },
    //选中触发
    handleCheckedCitiesChange(value) {
      this.checkedIdList = value
    },
    //确认修改权限
    async alterJurisdiction() {
      const { id: userId } = this.form
      const { checkedIdList } = this
      const roleId = checkedIdList.join()
      await userDoAssign({ userId, roleId })
      this.dialogFormVisibleTwo = false
      this.getUserAclList()
      this.$message({
        message: '设置成功了呢!',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped></style>
